<template>
  <div class="homework-detail-page">
    <div class="page-header">
      <el-button @click="$router.back()">返回</el-button>
      <h2>作业详情</h2>
    </div>
    
    <div v-if="homework" class="homework-content">
      <el-card>
        <template #header>
          <div class="card-header">
            <h3>{{ homework.title }}</h3>
          </div>
        </template>
        
        <div class="homework-info">
          <p><strong>描述：</strong>{{ homework.description || '无描述' }}</p>
          <p><strong>截止时间：</strong>{{ homework.deadline ? formatDate(homework.deadline) : '无截止时间' }}</p>
          <p><strong>题目数量：</strong>{{ homework.problems?.length || 0 }}</p>
        </div>
        
        <div v-if="homework.problem_details && homework.problem_details.length > 0" class="problems-list">
          <h4>题目列表：</h4>
          <el-table :data="homework.problem_details" style="width: 100%">
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="title" label="题目标题" />
            <el-table-column prop="type" label="类型" width="100">
              <template #default="{ row }">
                <el-tag :type="getTypeTagType(row.type)">
                  {{ getTypeText(row.type) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template #default="{ row }">
                <el-button size="small" @click="viewProblem(row)">查看题目</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
    
    <div v-else-if="loading" class="loading">
      <el-skeleton :rows="10" animated />
    </div>
    
    <div v-else class="error">
      <el-empty description="作业不存在" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { homeworksApi, type Homework } from '@/api/homeworks'

const route = useRoute()
const router = useRouter()
const homework = ref<Homework | null>(null)
const loading = ref(false)

const getTypeText = (type: string) => {
  const typeMap: Record<string, string> = {
    choice: '选择题',
    blank: '填空题',
    code: '编程题',
    short: '简答题'
  }
  return typeMap[type] || type
}

const getTypeTagType = (type: string) => {
  const typeMap: Record<string, string> = {
    choice: 'success',
    blank: 'warning',
    code: 'primary',
    short: 'info'
  }
  return typeMap[type] || ''
}

const formatDate = (dateStr: string) => {
  return new Date(dateStr).toLocaleDateString('zh-CN')
}

const loadHomework = async () => {
  const homeworkId = parseInt(route.params.id as string)
  if (!homeworkId) return
  
  loading.value = true
  try {
    homework.value = await homeworksApi.getHomework(homeworkId)
  } catch (error) {
    console.error('加载作业失败:', error)
  } finally {
    loading.value = false
  }
}

const viewProblem = (problem: any) => {
  router.push(`/problems/${problem.id}`)
}

onMounted(() => {
  loadHomework()
})
</script>

<style scoped>
.homework-detail-page {
  padding: 20px;
}

.page-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #333;
}

.homework-content {
  max-width: 800px;
}

.card-header h3 {
  margin: 0;
  color: #333;
}

.homework-info {
  margin-bottom: 20px;
}

.homework-info p {
  margin: 10px 0;
  color: #666;
}

.homework-info strong {
  color: #333;
}

.problems-list {
  margin-top: 20px;
}

.problems-list h4 {
  color: #333;
  margin-bottom: 15px;
}

.loading,
.error {
  max-width: 800px;
  margin: 0 auto;
}
</style>
